﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>AIN BLOG —— 秘 境</title>
    <!--Main style css-->
    <link th:href="@{/static/assets/css/style.css}" rel="stylesheet">
    <!--Color css-->
    <link th:href="@{/static/assets/css/colors/default-colors.css}" rel="stylesheet">
    <!--Responsive style css-->
    <link th:href="@{/static/assets/css/responsive.css}" rel="stylesheet">
    <!-- JS -->
    <!--jQuery 1.12.4 google link-->
    <script th:src="@{/static/assets/js/jquery.min.js}"></script>
    <script th:src="@{/static/assets/js/showMsg.js}"></script>
    <!-- 提示框 -->
    <style>
        .show_msg{
            width:100%;
            height:50px;
            text-align:center;
            position:fixed;
            left: 0;
            z-index: 999;
        }
        .show_span{
            display: inline-block;
            border-radius: 2px;
            height: 50px;
            padding: 0px 15px;
            line-height: 50px;
            background:rgba(0,0,0,0.8);
            color: #fff;
            font-size: 1em;
        }
    </style>
</head>
<body class="bodypadding">
<!--快速返回顶层--><!--END ScrollTop Btn-->
<div class="scroll_up gutengard_btn"><i class="icon-up-open-big"></i></div>
<!--搜索框引入-->
<div th:replace="../templates/commons/search::#main_search"></div>
<!--侧边框引入-->
<div th:replace="../templates/commons/floatBar::#main_floatBar"></div>
<!--导航栏引入-->
<div th:replace="../templates/commons/header::#main_header"></div>

<!--Single width Sidebar-->
<div class="container no_padding single_sidebar">
    <div class="row">
        <div class="col-lg-8">
            <!-- 封面 -->
            <div class="post_preview_image">
                <img alt="" th:src="${articleModel.articleCover}">
            </div>
            <!-- 主要内容 -->
            <div class="post_single_container clearfix">
                <div class="single_post_content">
                    <!--时间-->
                    <div class="breadcrumbs">
                        <div class="post_data_publiс" id="single_date">
                            <!-- 转换日期格式 -->
                            <script th:inline="javascript">
                                var year = [[${articleModel.articleDate}]].substring(0,4);
                                // console.log("year==="+year)
                                var tempMonth = [[${articleModel.articleDate}]].substring(5,7);
                                // console.log("tempmonth==="+tempMonth)
                                var month = "";
                                switch (tempMonth){
                                    case "01":
                                        month = "一月";
                                        break;
                                    case "02":
                                        month = "二月";
                                        break;
                                    case "03":
                                        month = "三月";
                                        break;
                                    case "04":
                                        month = "四月";
                                        break;
                                    case "05":
                                        month = "五月";
                                        break;
                                    case "06":
                                        month = "六月";
                                        break;
                                    case "07":
                                        month = "七月";
                                        break;
                                    case "08":
                                        month = "八月";
                                        break;
                                    case "09":
                                        month = "一九月";
                                        break;
                                    case "10":
                                        month = "十月";
                                        break;
                                    case "11":
                                        month = "十一月";
                                        break;
                                    case "12":
                                        month = "十二月";
                                        break;
                                }
                                var day = [[${articleModel.articleDate}]].substring(8,11);
                                // console.log("day==="+day)
                                $("#single_date").text(month+" "+day+", "+year);
                            </script>
                        </div>
                    </div>
                    <!-- 标题 -->
                    <h1>[[${articleModel.articleTitle}]]</h1>
                    <!-- 博文内容 -->
                    <div id="single_main_content">
                        [[${articleModel.articleContent}]]
                    </div>

                    <div class="post_datainfo">
                        <!-- 该博文标签 -->
                        <div class="post_datainfo_item tagspost">
                            <span class="tagpostname">标签：</span>
                            <a th:each="tagList:${articleAndTagVO.getTempTagModel()}" th:href="${#httpServletRequest.contextPath}+'/tag_subpage/'+${tagList.getTagId()}">[[${tagList.getTagName()}]]</a>
                        </div>
                        <!-- 该博文分类 -->
                        <div class="post_datainfo_item categoriesspost"><span class="catspostname">分类：</span>
                            <a th:href="${#httpServletRequest.contextPath}+'/category_subpage/'+${articleAndCategoryVO.getTempCategoryModel().categoryId}">[[${articleAndCategoryVO.getTempCategoryModel().categoryName}]]</a>
                        </div>
                        <!-- 该博文作者 -->
                        <div class="post_datainfo_item categoriesspost"><span class="catspostname">作者：</span>
                            <a id="userNickName"></a>
                        </div>
                    </div>

                    <div class="action-count">
                        <!--留言-->
                        <span class="comments_count" style="font-size: 16px;"><i id="faComments" class="fas fa-comments" style="font-size: 16px;letter-spacing: 4px;" title="去留言"></i>[[${articleModel.commentCount}]]</span>
                        <!--查看-->
                        <span class="reviews_count" style="font-size: 16px;"><i class="fas fa-eye" style="font-size: 16px;letter-spacing: 4px;"></i>[[${articleModel.articleView}]]</span>
                        <!--点赞-->
                        <span class="like_count"><i id="icons-xihuan" class="iconfont icons-xihuan" style="font-size: 18px;" title="喜欢就点一下吧"></i><i id="like_count" style="font-size: 15px">[[${articleModel.likeCount}]]</i></span>
                        <!--点赞事件-->
                        <script th:inline="javascript">
                            $("#faComments").click(function () {
                                scrollTo('#comment-respond',800);
                            })
                            $("#icons-xihuan").click(function () {
                                var typeOfLike = $("#icons-xihuan").css("color");
                                // console.log(typeOfLike);
                                if (typeOfLike != "rgb(240, 57, 57)"){
                                    $("#icons-xihuan").css("color","#f03939");
                                    $.get(
                                        "/likeCountPlusAndQuery/"+[[${articleModel.articleId}]],
                                        "action=updateLikeCount",
                                        function (data) {
                                            $("#like_count").text(data);
                                        }
                                    )
                                }else{
                                    showMsg("不能重复点赞",'center');
                                }
                            })
                        </script>
                    </div>

                </div>
            </div>

            <!-- 留言板展示 -->
            <div class="comments-area">
                <h3 class="comment_titleform" id="comment_titleform">留 言 墙</h3>

                <div class="block">
                    <ul class="comment-list" id="comment_list_ul" th:id="id_comment_refresh">
                        <li th:fragment="comment_refresh" class="comment" th:each="commentReplyVO:${commentModels}">
                            <div class="single-comment clearfix">
                                <div class="comment-author" style="text-align: center">
                                    <div class="inner-author">
                                        <!--留言昵称-->
                                        <div style="font-size: 20px;font-weight: 500;" th:text="${commentReplyVO.userNickName.substring(0,2)+'*'}"></div>
                                    </div>
                                    <div style="font-size: 14px;margin-top: 2px" th:text="${commentReplyVO.commentDate.substring(0,10)}"></div>
                                    <div style="font-size: 14px;text-align: center;letter-spacing: 2px;" th:text="${commentReplyVO.commentDate.substring(11,19)}"></div>
                                </div>
                                <!--留言内容-->
                                <div class="comment-text">
                                    <p th:text="${commentReplyVO.commentContent}"></p>
                                </div>
                            </div>

                            <!--回复信息展示区域-->
                            <ul class="children" th:style="${commentReplyVO.replyStatus == 1}? 'display:block;':'display:none;'">
                                <li class="comment">
                                    <div class="single-comment clearfix">
                                        <div class="comment-author">
                                            <div class="inner-author">
                                                <div style="line-height: 60px;font-size: 14px;margin-top: 2px">博主回复</div>
                                            </div>
                                        </div>
                                        <div class="comment-text">
                                            <!--回复内容展示-->
                                            <p th:text="${commentReplyVO.replyContent!=null}?${commentReplyVO.replyContent}:''"></p>
                                        </div>
                                    </div>
                                </li>
                            </ul>

                        </li>
                    </ul>
                </div>
                <!--发布评论的表单-->
                <div class="comment-respond" id="comment-respond" style="padding-top: 100px">
                    <!--留言框-->
                    <form class="comment-form" id="comment_form" onsubmit="return false">
                        <input name="articleId" type="hidden" th:value="${articleModel.articleId}">
                        <!--昵称输入-->
                        <div class="row" >
                            <div class="col-lg-12">
                                <div style="float: left;line-height: 44px">昵称：</div>
                                <div class="custom-field" style="width: 300px;float: left">
                                    <input id="nickName" name="userNickName" title="不可超过15个字符" maxlength="15" type="text" style="padding: 15px" required autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <!--留言输入-->
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="custom-field">
                                    <textarea title="不能超过150个字！" maxlength="150" id="comment" name="commentContent" placeholder="留下你的观点..." required rows="7" autocomplete="off"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <button class="btn_gurd btn_send" id="SendBtn">提交</button>
                        </div>
                    </form>
                    <script th:inline="javascript">
                        //评论提交事件
                        $("#SendBtn").click(function (data) {
                            var dataForm = $("#comment_form").serialize();
                            var nick = $("#nickName").val();
                            var textarea = $("#comment").val();
                            if ((nick==""&&$.trim(nick).length==0) || (textarea==""&&$.trim(textarea).length==0)){
                                showMsg("留言不可为空！",'center');
                            }else{
                                $.post(
                                    "/commentInsert",
                                    "action=commentInsert&"+dataForm,
                                    function (data) {
                                        //清空输入框
                                        $("#nickName").val("");
                                        $("#comment").val("");
                                        //提示
                                        showMsg(data,'center');
                                        //局部刷新留言部分
                                        commentRefresh();
                                    })
                            }
                        })
                        //局部刷新方法
                        function commentRefresh(){
                            let articleId = [[${articleModel.articleId}]];
                            $.get(
                                "/queryAllCommentById/"+articleId,
                                "action=queryAllCommentById",
                                function (data) {
                                    $("#id_comment_refresh").html(data);
                                }
                            )
                            scrollTo('#comment_titleform',800);
                        }
                    </script>
                </div>
            </div>

        </div>

        <!---侧翼相关推荐-->
        <div class="col-lg-4" id="col-lg-4">
            <div class="sidebar_post" id="sidebar_post">
                <!--Widget-->
                <div class="sidebar_block" id="sidebar_block">
                    <div class="widget_recent_image">
                        <h4 class="widget_title" id="widget_title">相关推荐</h4>
                        <div class="widget_recent_post" id="widget_recent_post" style="height: 600px;display: none">
                            <ul id="single_about_ul">
                                <!--根据相似的标签推荐-->
                            </ul>
                        </div>
                    </div>
                </div><!--END Widhet-->
            </div>
        </div>
    </div>
</div><!--END Single with Sidebar-->

<!--引入尾部-->
<div th:replace="../templates/commons/footer::#main_footer"></div>

<!--Bootstrap 4.1.0-->
<script th:src="@{/static/assets/libs/bootstrap-4.1.0/bootstrap.min.js}"></script>
<!--jquery.magnific-popup-->
<script th:src="@{/static/assets/libs/jquery.magnific-popup/jquery.magnific-popup.min.js}"></script>
<!--OWL Carousel-->
<script th:src="@{/static/assets/libs/owlcarousel2-2.3.4/owl.carousel.min.js}"></script>
<!--Custom js-->
<script th:src="@{/static/assets/js/custom.js}"></script>
<script th:inline="javascript">
    $(document).ready (function () {
        //将数据库中的博文内容转换为html
        var mainContent = [[${articleModel.articleContent}]];
        $("#single_main_content").html(mainContent);
        //查询nickName到页面
        $.ajax({
            async : true,
            url : "/queryNickName",
            type : "get",
            success : function (data) {
                $("#userNickName").text(data);
            }
        })
        //获取当前文章的博文ID
        var categoryId = [[${articleAndCategoryVO.getTempCategoryModel().categoryId}]];
        var articleId = [[${articleModel.articleId}]];
        //根据分类ID值，查询相同分类的博文，并且排除当前博文，作为相关推荐
        $.ajax({
            async : true,
            url : "/queryArticleModelByCategoryLimit6/"+categoryId+"/"+articleId,
            type : "get",
            success : function (data) {
                $.each(data, function (i ,item) {
                    // console.log(item.articleTitle);
                    //转换日期
                    var year = item.articleDate.substring(0,4);
                    var tempMonth = item.articleDate.substring(5,7);
                    var month = "";
                    switch (tempMonth) {
                        case "01":
                            month = "一月";
                            break;
                        case "02":
                            month = "二月";
                            break;
                        case "03":
                            month = "三月";
                            break;
                        case "04":
                            month = "四月";
                            break;
                        case "05":
                            month = "五月";
                            break;
                        case "06":
                            month = "六月";
                            break;
                        case "07":
                            month = "七月";
                            break;
                        case "08":
                            month = "八月";
                            break;
                        case "09":
                            month = "一九月";
                            break;
                        case "10":
                            month = "十月";
                            break;
                        case "11":
                            month = "十一月";
                            break;
                        case "12":
                            month = "十二月";
                            break;
                    }
                    var day = item.articleDate.substring(8,11);
                    var $about_li = (
                        "<li>" +
                            "<div class='post_thumb'>" +
                                "<a href='/single/"+item.articleId+"'>" +
                                    "<img src='"+item.articleCover+"'>" +
                                "</a>" +
                            "</div>" +
                            "<h6 class='post_name'>" +
                                "<a style='overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;' href='/single/"+item.articleId+"'>"+item.articleTitle+"</a>" +
                            "</h6>" +
                            "<div class='post_data_recent'>" +
                                "<div class='post_data'>" +
                                    "<i class='fas fa-clock'></i>" +
                                        month + " " + day + ", " + year +
                                "</div>" +
                            "</div>" +
                        "</li>"
                    )
                    $("#single_about_ul").append($about_li);
                })
                //当ajax执行完以后，图片加载成功以后（延时实现），执行动画
                $("#widget_recent_post").delay(400).slideDown(3000);
            }
        })

        // var commentId = new Array();
        // var key = 0;
        // $('.inputReply').each(function () {
        //     commentId[key] = $(this).val();
        //     console.log(commentId[key]);
        //     //为回复框赋值
        //     replyContentQuery(commentId[key]);
        //     //判断回复框是否有值
        //     timeJudgment(commentId[key]);
        // })
        // function timeJudgment(commentId) {
        //     $('#'+commentId+'_p').bind(function () {
        //         var content = $(this).text();
        //         if (content == ""){
        //             console.log(commentId+"没有值！");
        //         }else {
        //             console.log(commentId+"有值！");
        //         }
        //     })
        // }
        // function replyContentQuery(commentId) {
        //     $.get(
        //         //依次查询留言的回复状态
        //         "/selectReplyStatus/"+commentId,
        //         function (data) {
        //             if (data == 1){
        //                 //已回复
        //                 $.get(
        //                     "/selectReplyByCommentId/"+commentId,
        //                     function (data) {
        //                         // console.log(data);
        //                         // console.log("#"+commentId+"_p");
        //                         //为回复框写入内容
        //                         $('#'+commentId+'_p').text(data);
        //                         //展示回复框
        //                         $('#'+commentId+'_ul').css("display","block");
        //                     }
        //                 )
        //             }else{
        //                 //未回复
        //
        //             }
        //
        //         }
        //     )
        // }
        // //实时判断

    })
</script>

</body>
</html>